import React from 'react';
import {connect} from 'dva';
import styles from './index.less';
import { Accordion, List, Button, Toast } from 'antd-mobile';
import addAccommodationInfo from '@/components/addAccommodationInfo';
import UserServices from '@/services/user';
import { requestSuccess, getMastId } from '@/utils/tools';
/**
 * 住宿
 */
class cAccommodationInfo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {

    }
  }

  handleShowPanel = () =>{
    addAccommodationInfo.open({
      success: (data) => {
        if(data == 'fromCtripSuccess'){
          console.log(321);
          this.props.dispatch({type: 'detail/getData'});
        }else{
          this.props.dispatch({type: 'detail/changeMast', payload: {
            accommodationInfoList: data
          }})
        }
      }
    });
  }

  handleDelInfo = (e, item) => {
    e.stopPropagation();
    const id = getMastId();
    console.log(item);
    const idText = `${Object.keys(id)[0]}=${Object.values(id)[0]}`;
    const errorFn = (e) => {
      if(e){
        const message = e.message || 'Error';
        Toast.fail(message);
      }
    }
    UserServices.delelteAccommodationById(item.id, idText).then(res => {
      if(requestSuccess(res)){
        const arr = global._.filter(this.props.detail.mast.accommodationInfoList, child => {
          return child.id !== item.id;
        });
        Toast.success('Success');
        this.onChange(arr, 'accommodationInfoList');
      }else{
        const errorInfo = global._.get(res, 'data.errorMessageList');
        errorFn(new Error(errorInfo))
      }
    }).then(errorFn)
  }

  onChange = (value, key) => {
    this.props.dispatch({type: 'detail/changeMast', payload: {
      [key]: value
    }});
  }

  render(){
    return (
      <div className={styles.baseList}>
        <div className={`${styles.item} ${styles.blockItem}`}>
          <div className={styles.des}>Accommodation Details</div>
          <div className={styles.value}>
            <div className={styles.labels}>
              <div className={styles.label}>
                Traveller
              </div>
              <div className={styles.label}>
                Order Amount(RMB)
              </div>
              {
                this.props.edit
                ?
                <div className={styles.smallLabel}>
                  Action
                </div>
                :
                null
              }
            </div>
            <Accordion className={styles.cList} onChange={this.onChange}>
              {
                this.props.detail.mast && this.props.detail.mast.accommodationInfoList && this.props.detail.mast.accommodationInfoList.map((item, index) => {
                  const headerDom = (cc) => {
                    return (
                      <div className={styles.headerValues}>
                        <div>{cc.traveller}</div>
                        <div>{cc.price}</div>
                        {
                          this.props.edit
                          ?
                          <div className={styles.smallDiv}>
                            <Button onClick={(e) => this.handleDelInfo(e, item)} style={{padding: '0px 5px'}}>Delete</Button>
                          </div>
                          :
                          null
                        }
                      </div>
                    )
                  }
                  return (
                    <Accordion.Panel header={headerDom(item)} key={index}>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Order No</div>
                        <div className={styles.cValue}>{item.orderNo}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Traveller</div>
                        <div className={styles.cValue}>{item.traveller}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>City</div>
                        <div className={styles.cValue}>{item.city}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Hotel</div>
                        <div className={styles.cValue}>{item.hotelName}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Night（s）</div>
                        <div className={styles.cValue}>{item.nightCount}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Check-In Date</div>
                        <div className={styles.cValue}>{global.moment(item.checkIndate).format('YYYY-MM-DD HH:mm')}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>CheckOut Date</div>
                        <div className={styles.cValue}>{global.moment(item.checkOutDate).format('YYYY-MM-DD HH:mm')}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Order Amount（RMB）</div>
                        <div className={styles.cValue}>{item.price}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Cost Center</div>
                        <div className={styles.cValue}>{item.costCenter}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Exceeded Standard</div>
                        <div className={styles.cValue}>{item.exceedStd}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Confirm</div>
                        <div className={styles.cValue}>{item.confirmFlag}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Remark</div>
                        <div className={styles.cValue}>{item.remark}</div>
                      </div>
                    </Accordion.Panel>
                    )
                  })
                }
           </Accordion>
           {
             !this.props.edit
             ?
             null
             :
             <Button style={{width: '150px', margin: '5px'}} onClick={this.handleShowPanel}>Add</Button>
           }
          </div>
        </div>
      </div>
    )
  }
}


function mapStateToProps(state) {
  return {
    ...state.detail
  }
}
export default connect(mapStateToProps)(cAccommodationInfo);
